<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页统计</title>
</head>
<body>
<!--    <div style="text-align: center">-->
<!--        <h1>考试题库管理</h1>-->
<!--        <p>山西青年职业学院-计算机与信息工程系</p>-->
<!--    </div>-->
    <div style="width: 100%; height: 10px;"></div>
    <div id="ywyandtglandcsl" style="width: 100%; height: 400px; border: 0px blue dashed;"></div>
    <script>
        $(function (){
            //业务员/推广量/超市入驻量-统计
            var app = {};
            var chartDom = document.getElementById('ywyandtglandcsl');
            var myChartywyandtglandcsl = echarts.init(chartDom);
            var optionWYJ;

            app.config = {
                // rotate: 90,
                // align: 'left',
                verticalAlign: 'middle',
                position: 'insideBottom',
                distance: 15
            };

            var labelOption = {
                show: true,
                position: app.config.position,
                distance: app.config.distance,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                rotate: app.config.rotate,
                formatter: '{c} ', // {name|{a}}
                fontSize: 16,
                rich: {
                    name: {
                    }
                }
            };

            var optionWYJ = {
                title: {
                    text: '题型统计'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                legend: {
                    data: ['简单题', '一般题', '难题']
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {show: false},
                        data: ['单学题', '多选题', '判断题', '填空题', '简答题']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '简单题',
                        type: 'bar',
                        barGap: 0,
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [2, 3, 1, 22, 10]
                    },
                    {
                        name: '一般题',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [10, 20, 3, 9, 8]
                    },
                    {
                        name: '难题',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [10, 12, 2, 4, 7]
                    }
                ]
            };

            myChartywyandtglandcsl.setOption(optionWYJ,true);
            //监听页面的尺寸变化，动态改变echarts的尺寸
            window.onresize = function () {
                myChartywyandtglandcsl.resize();
            }
        })

    </script>
</body>
</html>